<div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row style="margin-top:20px;margin-button:20px">
        <el-col :span="8">
            <el-input v-model="searchText" placeholder="请输入查询内容">
                <!-- <el-select v-model="value" placeholder="请选择">
                    <el-option label="全部" :value="0">
                    </el-option>
                    <el-option label="正常" :value="1">
                    </el-option>
                    <el-option label="禁用" :value="2">
                    </el-option>
                </el-select> -->
                <el-button @click="startQuery" slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </el-col>
    </el-row>

    <el-table :data="userData" style="width: 100%">
        <el-table-column label="id" width="180" prop="id"></el-table-column>
        <el-table-column label="用户名" width="180" prop="account"></el-table-column>
        <el-table-column label="状态" width="180">
            <template slot-scope="scope">
        <span>{{scope.row.status==='1'?'正常':'禁用'}}</span>
      </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button @click="changeStatus(scope.row)" slot="append" type="primary">{{scope.row.status==='1'?'禁用':'解封'}}</el-button>
      </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination :background="true" layout="prev, pager, next" :total="totalCount" :page-size="4" :current-page="pageIndex" @current-change='changeCurrentPage'>
    </el-pagination>

</div>